<template>

  <div
    @mouseenter="showtips"
  >

<!--          <div style="margin: 2px 0">注意：如果有时候按钮不能点击，是因为模型 zIndex 挡住了按钮。</div>-->
<!--          <div>-->
<!--            <span>position style：</span>-->
<!--            <button @click="style = 'position: fixed; top: calc(50% - 250px); left: calc(50% - 200px)'">呆在中间</button>-->
<!--            <button @click="style = 'position: fixed; top: 0; left: 0; zIndex: 1'">呆在左上角</button>-->
<!--            <button @click="style = 'position: fixed; top: 0; right: 0; zIndex: 1'">呆在右上角</button>-->
<!--            <button @click="style = 'position: fixed; bottom: 0; left: 0; zIndex: 1'">呆在左下角</button>-->
<!--            <button @click="style = 'position: fixed; bottom: 0; right: 0;'">呆在右下角</button>-->
<!--            <button @click="style = ''">跟随流</button>-->
<!--          </div>-->
<!--          <div>-->
<!--            <span>direction：</span>-->
<!--            <button @click="direction = 'right'">呆在右边</button>-->
<!--            <button @click="direction = 'left'">呆在左边</button>-->
<!--          </div>-->
<!--          <div>-->
<!--            <span>size：</span>-->
<!--            <button @click="size = size - 100; width = width - 100; height = height - 100;">减小</button>-->
<!--            <button @click="size = size + 100; width = width + 100; height = height + 100;">增大</button>-->
<!--          </div>-->

    <transition name="fade-transform" mode="out-in">
    <keep-alive>
    <div v-if="show">
      <vueLive2d
        :style="style"
        :model="model"
        :direction="direction"
        :size="size"
        :tips="tips"
        :toolShows="toolShows"
        :toolShowsList="toolShowsList"
      ></vueLive2d>
    </div>
    </keep-alive>
    </transition>
  </div>

</template>

<script>

import vueLive2d from 'vue-live2d'

export default {

  name: "copTips",

  props: {

    toolShowsList:{
      default:() => [],
      type: Array
    },

    tips:{
      default:() => {},
      type: Object
    }

  },

  components: {
    vueLive2d
  },

  data(){
    return{

      toolShowsListNum:0,

      toolShows:false,

      show:false,

      model:[5,1],
      direction: 'right',
      style: '',
      width: 500,
      height: 500,
      size: 350

    }
  },

  watch:{


  },

  created() {

    this.oncetips();

  },

  methods: {

    oncetips(){

      let that = this;

      this.style = this.getStyleByzIndex(true);

      vueLive2d.props.toolShows = {
        default:false,
        type: Boolean
      };

      vueLive2d.props.toolShowsList = {
        default:() => [],
        type: Array
      };

      vueLive2d.watch.toolShows = function (val){

        if(val==true){

          this.showMessage(this.toolShowsList[parseInt(that.toolShowsListNum)])

          that.toolShowsListNum = that.toolShowsListNum >= (this.toolShowsList.length - 1) ? 0 : (that.toolShowsListNum + 1);

        }

      };


      vueLive2d.watch.mainShow = function (val) {

        that.style = that.getStyleByzIndex(val);

/*        let temp=this.$refs['vue-live2d-toggle'];
        console.log(temp)*/

        const containers = ['vue-live2d']
        const refs = this.$refs
        containers.forEach(containerName => {
          /*console.log(refs['containerName'].classList)*/
          refs[containerName].classList.toggle(`${containerName}-on-${this.direction}`)
        })
      };



      this.show = true;

    },

    getStyleByzIndex(flag){

      this.size = flag==true?300:50;

      return flag==true?'position: fixed; bottom: 0px; left: 50px;zIndex: 3;':'position: fixed; bottom: 0px; right: 0px;zIndex: 999;';
    },

    showtips(){

      this.toolShows = true;

      setTimeout(()=>{

        this.toolShows = false;

      },1000)

    },

  }


}
</script>


<style>

/* 提示信息样式 */
.vue-live2d-tip{
  font-size: 20px !important;
  font-family: 幼圆;
  font-weight: bolder;
  color: white;
}

/* 隐藏拍照 */
.fa-camera-retro{
  display: none !important;
}

/* 隐藏git源码地址 */
.fa-info-circle{
  display: none !important;
}

/* 看板娘三字大小 */
.vue-live2d-toggle{
  font-size: 0.3rem !important;

}

</style>
